<div class="shelf-assigner">
  <div class="panel-header">
    <div class="header-icon-wrapper">
      <i class="pi pi-bookmark header-icon"></i>
    </div>
    <div class="header-text">
      <h2 class="panel-title">Assign Books to Shelves</h2>
      <p class="panel-description">
        @if (isMultiBooks) {
          Select shelves for {{ bookIds.size }} {{ bookIds.size === 1 ? 'book' : 'books' }}
        } @else {
          Organize "{{ book.metadata?.title }}" into your shelves
        }
      </p>
    </div>
    <p-button
      icon="pi pi-times"
      [text]="true"
      [rounded]="true"
      severity="secondary"
      (onClick)="closeDialog()"
      styleClass="close-button">
    </p-button>
  </div>

  <div class="shelves-container">
    @if ((shelfState$ | async)?.shelves && (shelfState$ | async)!.shelves!.length > 0) {
      <div class="shelves-list">
        <div class="list-header">
          <span class="shelf-count">
            <i class="pi pi-bookmark"></i>
            {{ (shelfState$ | async)!.shelves!.length }} {{ (shelfState$ | async)!.shelves!.length === 1 ? 'shelf' : 'shelves' }} available
          </span>
        </div>

        <div class="shelves-grid">
          @for (shelf of (shelfState$ | async)?.shelves; track shelf.id) {
            <div class="shelf-item" [class.selected]="isShelfSelected(shelf)">
              <div class="shelf-checkbox">
                <p-checkbox
                  [inputId]="'shelf-' + shelf.id"
                  name="shelves"
                  [value]="shelf"
                  [(ngModel)]="selectedShelves"
                />
              </div>
              <label [for]="'shelf-' + shelf.id" class="shelf-label">
                <div class="shelf-icon-wrapper">
                  @if (shelf.icon) {
                    <i [class]="'pi pi-' + shelf.icon + ' shelf-icon'"></i>
                  } @else {
                    <i class="pi pi-bookmark shelf-icon"></i>
                  }
                </div>
                <span class="shelf-name">{{ shelf.name }}</span>
              </label>
            </div>
          }
        </div>
      </div>
    } @else {
      <div class="empty-state">
        <div class="empty-icon-wrapper">
          <i class="pi pi-bookmark empty-icon"></i>
        </div>
        <h3 class="empty-title">No Shelves Available</h3>
        <p class="empty-description">
          Create your first shelf to start organizing your books.<br/>
          Click the button below to get started.
        </p>
      </div>
    }
  </div>

  <div class="dialog-footer">
    <p-button
      label="Create Shelf"
      icon="pi pi-plus"
      [outlined]="true"
      severity="info"
      (onClick)="createShelfDialog()"
    />
    <div class="footer-actions">
      <p-button
        label="Cancel"
        severity="secondary"
        [outlined]="true"
        (onClick)="closeDialog()"
      />
      <p-button
        label="Save Changes"
        icon="pi pi-check"
        severity="success"
        (onClick)="updateBooksShelves()"
      />
    </div>
  </div>
</div>
